Styliser une page web avec du css
1) mise en place du fichier css
Pour commencer, vous devez créer un dossier avec un fichier « .html »(ex: premierePage.html) avec ce petit bout de code
Vous l’enregistrez.
Ensuite, il faut créer un nouveau fichier avec l’extenssion « .css » (ex: styles.css). Il faut l’enregistrer au même niveau que votre page html.
Une fois créer votre fichier css nous devons l’appeller dans notre page html avec une petite ligne à placer entre les balises « <head>et</head> » . Ce qui donne
Voila, votre fichier css va donc être chargé au lancement de votre page web.
2) Un peu de style dans notre page web
On va commencer par quelques propriétées pour notre <body>. Prenez votre fichier css et écrivez ce code
Quelques petites explications
- on commence par faire appelle au selecteur —> body
-
ensuite on écrit les propriétées avec leur valeurs entre crochets
- background (couleur de fond) avec une valeur #97DAF7 qui est un code couleur hexadécimal qui correspond à un bleu clair.
- font-size correspond à la taille de la police, sa valeur 16 pixel est une taille standard
- font-family permet de mettre une police de votre choix (Cursive, sans-serif, etc..) ou même vous pouvez télécharger une police par exemple sur le site « DAFONT » (un des plus connus) et l’appliquer sur votre site avec cette propriétée.
Il faut absolument pensé a bien mettre le point virgule « ; » à la fin de chaque propriétée sinon vous aurez une erreur et elle ne sera pas appliquée.
Maintenant, enregistrez votre fichier css et lancez votre page html afin de voir les modifications apportées.
Ah enfin un peu de couleur…
3) Un peu de code
On a vu quelques bases mais rien ne vaut la pratique. Plus vous pratiquerez, plus vous y arriverez. N’hésitez pas a aller sur le net pour chercher toutes les propriétées css3 ainsi que les balises en html5 et de vous entrainez à les utiliser.
Dans cet example, on va créer une page web avec un titre, un menu, un text et un pied de page et tout ça avec un peu de css.
Allez c’est parti… Du code, du code…
On va commencer par structurer notre page html avec tout nos éléments et ensuite on s’occupera de la mise en page avec le css. Bien préparer son projet en se posant les bonnes questions permet d’avancer plus vite et éfficacement.
Donc on va structurer notre page html en trois partie
- La première partie avec le titre et les menus qu’on mettra dans une balise
<header - la deuxième partie avec tout le contenu du site qu’on mettra dans une balise
<section> - la troisième partie avec le pied de page qu’on mettra dans une balise
<footer>
Bon maintenant qu’on a élaboré notre plan d’attaque il ne vous reste plus qu’a l’éxécuter.
Ouvez votre éditeur de texte et recopier ce code
Une fois ce code recopié, vous l’enregistrez dans un fichier et appelé le « index.html ». Si vous lancer ce fichier dans votre navigateur vous aurez cette apperçu
Maintenant on va faire la mise page dans le fichier « styles.css », recopié ce code
Ce qui nous donne
C’est un peu mieux…
4) Conclusion
Comme vous pouvez le voir le « css » est trés important car sans lui votre page web ne ressemblera à rien du tout. Faites des recherches sur les propriétées du Css3 vous verrez, on peut faire beaucoup de choses très intéréssantes.
Voilà, j’espère qu’avec cette article vous avez pu comprendre les bases du css et l’importance de ce langage.
Merci d’avoir suivi cet article jusqu’au bout et je vous dis à bientôt pour un prochain article.
BYE